<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>错误界面</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        /*
   * Globals
   */

        /* Links */
        a,
        a:focus,
        a:hover {
            color: #fff;
        }

        /* Custom default button */
        .btn-secondary,
        .btn-secondary:hover,
        .btn-secondary:focus {
            color: #333;
            text-shadow: none; /* Prevent inheritance from `body` */
            background-color: #fff;
            border: .05rem solid #fff;
        }


        /*
         * Base structure
         */

        html,
        body {
            height: 100%;
            background-color: #333;
        }

        body {
            display: -ms-flexbox;
            display: flex;
            color: #fff;
            text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
            box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
        }

        .cover-container {
            max-width: 42em;
        }


        /*
         * Header
         */
        .masthead {
            margin-bottom: 2rem;
        }

        .masthead-brand {
            margin-bottom: 0;
        }

        .nav-masthead .nav-link {
            padding: .25rem 0;
            font-weight: 700;
            color: rgba(255, 255, 255, .5);
            background-color: transparent;
            border-bottom: .25rem solid transparent;
        }

        .nav-masthead .nav-link:hover,
        .nav-masthead .nav-link:focus {
            border-bottom-color: rgba(255, 255, 255, .25);
        }

        .nav-masthead .nav-link + .nav-link {
            margin-left: 1rem;
        }

        .nav-masthead .active {
            color: #fff;
            border-bottom-color: #fff;
        }

        @media (min-width: 48em) {
            .masthead-brand {
                float: left;
            }
            .nav-masthead {
                float: right;
            }
        }


        /*
         * Cover
         */
        .cover {
            padding: 0 1.5rem;
        }
        .cover .btn-lg {
            padding: .75rem 1.25rem;
            font-weight: 700;
        }


        /*
         * Footer
         */
        .mastfoot {
            color: rgba(255, 255, 255, .5);
        }


    </style>
</head>
<body class="text-center">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
    <header class="masthead mb-auto">
        <div class="inner">
            <h3 class="masthead-brand">常州工学院评教系统</h3>
            <nav class="nav nav-masthead justify-content-center">
                <a class="nav-link active" href="/index" id="nav1">主页</a>
                <a class="nav-link" href="#" id="nav2">申诉</a>
                <a class="nav-link" href="#" id="nav3">联系我们</a>
            </nav>
        </div>
    </header>

    <main role="main" class="inner cover">
        <h1 class="cover-heading">ERROR</h1>
        <p class="lead">这是一个错误页面 您可能遇到了某种麻烦</p>
        <p class="lead"> 我们深表歉意 并衷心希望下面的报错信息能为您解决问题</p>
        <p class="lead" th:text="${errorMessage}" id="error_msg">Error Message：</p>
        <p class="lead">
            <a href="/index" class="btn btn-lg btn-secondary">返回主页</a>
        </p>
    </main>

    <footer class="mastfoot mt-auto">
        <div class="inner">
            <p>Page for <a href="/index">Evaluate</a>, by <a href="https://blog.csdn.net/baidu_41860619">@Lpq</a>.</p>
        </div>
    </footer>
</div>


<script type="text/javascript" th:inline="javascript">

    $(document).ready(function () {

        var data = [[${errorMessage}]];

        if (data==null){
            $("#error_msg").html("4 0 4 NOT FOUND")
        }

        var $nav1 = $("#nav1");
        var $nav2 = $("#nav2");
        var $nav3 = $("#nav3");

        $("#nav1").click(function (params) {
            $nav1.attr("class","nav-link active")
            $nav2.attr("class","nav-link")
            $nav3.attr("class","nav-link")
        });

        $("#nav2").click(function (params) {
            $nav1.attr("class","nav-link")
            $nav2.attr("class","nav-link active")
            $nav3.attr("class","nav-link")
        });

        $("#nav3").click(function (params) {
            $nav1.attr("class","nav-link")
            $nav2.attr("class","nav-link")
            $nav3.attr("class","nav-link active")
        });
    })
</script>
</body>